<template>
  <div id='main_navbar'>
<!-- 一句话： float去漂浮 -->
    <div class='nav_link'>
      <ul class="nav_link_ul">
        <li class="nav_link_item" @click="goTo('main-content')"><a>主站</a></li>
        <li class="nav_link_item"><a>其他</a></li> 
        <li class="nav_link_item" @click="getCurrentUser"><a>currentUser</a></li> 
      </ul>
    </div>

    <div class='nav_user'>
      <div class="nav_user_list">
        <div class="nav_user_item" >
          <div id='portrait' >
            <!-- nihoa -->
            <el-avatar :src="this.currentUser.user.portrait"></el-avatar>
          </div>
        </div>
        <div class="nav_user_item">
          <div>
            <span>{{this.currentUser.user.nickName}}</span>
          </div>
        </div>
        <div class="nav_user_item">
          <div>
            <a @click="logout">退出</a>
            <!-- <el-button size="small" @click="logout">退出</el-button> -->
          </div>
        </div>
      
        <div class="nav_user_item">
          <div>
            <a @click="goTo('account')">个人中心</a>
          </div>
        </div>

        <div class="nav_user_item">
          <div>
            <a @click="goTo('message')">消息</a>
          </div>
        </div>

        <div class="nav_user_item">
          <div>
            <a href="">其他</a>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  components: {
    
  },
  mounted() {
    
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    getCurrentUser(){
      console.log("currentUser", this.currentUser.user);
    },
    goTo(path){
      this.$router.replace({name: path})
    },
    logout(){
      this.$http1({
        url: this.$http.adornUrl("/user/login/user/logout"),
          method: "post",
        //   data: this.$http.adornData(data, false)
        }).then(({ data }) => {
          this.$message({
            type: "success",
            message: "退出成功!",
          });

          localStorage.removeItem("user_token_"+ this.currentUser.user.uid);
          // window.location.href="/#/userlogin";
          this.$router.replace({name: 'userlogin'})
        });
    },
  },
}
</script>

<style>

/* 整个 navbar */
#main_navbar{
  min-width: 980px;
  height: 60px;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid #000;

  /** 4行：设置文本无法选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 左侧 用户无关 的东西 */
.nav_link{
  float: left;
  position: relative;
  margin: 10px 0px;
  height: 40px;
  display: inline-block;
}
.nav_link_ul{
  
}
.nav_link_item{
  display: inline-block;
  margin-right: 20px;

}
.nav_link_item a{
  color: rgb(0, 0, 0);
  text-decoration: none;
  cursor: pointer;
}
.nav_link_item a:visited,a:hover,a:active{
  color: #000;
}


/* 右侧 用户user相关 的东西 */
.nav_user{
  position: relative;
  height: 50px;
  margin: 5px 0px;
  display: inline-block;
  float: right;
  margin-right:30px;
  /* right: 30px; */
}
.nav_link_list{

}
.nav_user_item{
  position: relative;
  line-height: 20px;
  top: 15px;
  display: inline-block;
  margin-left: 20px;
  float: left;
}

#portrait{ /** 头像向下偏移一点 */
  position: relative;
  /* display: block; */
  /* height: 40px; */
  /* top: 5px; */
  bottom: 10px;
}

.nav_user_item a{ /** 正常 有href=""，a:link才生效 */
  color: rgb(0, 0, 0);
  text-decoration: none;
  cursor: pointer;
}
.nav_user_item a:visited{ /** 访问后 */
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.nav_user_item a:hover{ /** 悬浮 */
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.nav_user_item a:active{ /** 点击 */
  color: #000;
  text-decoration: none;
  cursor: pointer;
}




</style>